<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048 Game</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #faf8ef;
        }
        .game-container {
            max-width: 600px;
            margin: 50px auto;
            text-align: center;
        }
        .game-board {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            background-color: #bbada0;
            padding: 10px;
            border-radius: 10px;
            position: relative;
        }
        .tile {
            width: 100px;
            height: 100px;
            background-color: #eee4da;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            color: #776e65;
            border-radius: 6px;
        }
        .score-board {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .score {
            background-color: #bbada0;
            width: 100px;
            text-align: center;
            padding: 10px;
            border-radius: 6px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>2048 Game</h1>
        <div class="score-board">
            <div class="score">
                <strong>Score:</strong> <span id="score">0</span>
            </div>
        </div>
        <button class="btn btn-primary my-3" id="startBtn">Start Game</button>
        <div class="game-board" id="gameBoard">
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
        </div>
        <p class="mt-4">Combine numbers to reach 2048!</p>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            let board = [];
            const scoreElement = document.getElementById('score');
            const gameBoardElement = document.getElementById('gameBoard');
            const startBtn = document.getElementById('startBtn');

            startBtn.addEventListener('click', () => {
                initializeBoard();
                renderBoard();
                scoreElement.innerText = 0;
            });

            function initializeBoard() {
                board = Array.from({length: 16}, () => 0);
                addRandomTile();
                addRandomTile();
            }

            function renderBoard() {
                const tiles = gameBoardElement.getElementsByClassName('tile');
                for (let i = 0; i < board.length; i++) {
                    tiles[i].innerText = board[i] === 0 ? '' : board[i];
                    tiles[i].style.backgroundColor = board[i] ? getTileColor(board[i]) : '#cdc1b5';
                }
            }

            function addRandomTile() {
                let freeIndices = [];
                for (let i = 0; i < board.length; i++) {
                    if (board[i] === 0) freeIndices.push(i);
                }

                if (freeIndices.length === 0) return;

                const randomIndex = freeIndices[Math.floor(Math.random() * freeIndices.length)];
                board[randomIndex] = Math.random() < 0.9 ? 2 : 4;
            }

            function getTileColor(value) {
                switch (value) {
                    case 2: return '#eee4da'; case 4: return '#ede0c8'; case 8: return '#f2b179';
                    case 16: return '#f59563'; case 32: return '#f67c5f'; case 64: return '#f65e3b';
                    case 128: return '#edcf72'; case 256: return '#edcc61'; case 512: return '#edc850';
                    case 1024: return '#edc53f'; case 2048: return '#edc22e'; default: return '#3c3a32';
                }
            }

            document.addEventListener('keydown', (event) => {
                switch (event.key) {
                    case 'ArrowUp': move('up'); break;
                    case 'ArrowDown': move('down'); break;
                    case 'ArrowLeft': move('left'); break;
                    case 'ArrowRight': move('right'); break;
                }
            });

            function move(direction) {
                let moved = false;
                if (direction === 'up') moved = shiftUp();
                if (direction === 'down') moved = shiftDown();
                if (direction === 'left') moved = shiftLeft();
                if (direction === 'right') moved = shiftRight();

                if (moved) {
                    addRandomTile();
                    renderBoard();
                }
            }

            function shiftLeft() {
                let moved = false;
                for (let row = 0; row < 4; row++) {
                    let rowData = [];
                    for (let col = 0; col < 4; col++) {
                        if (board[row * 4 + col] !== 0) {
                            rowData.push(board[row * 4 + col]);
                        }
                    }
                    for (let col = 0; col < 4; col++) {
                        if (col < rowData.length) {
                            board[row * 4 + col] = rowData[col];
                            if (board[row * 4 + col] !== rowData[col]) moved = true;
                        } else {
                            board[row * 4 + col] = 0;
                        }
                    }

                    for (let col = 0; col < 3; col++) {
                        if (board[row * 4 + col] === board[row * 4 + col + 1]) {
                            board[row * 4 + col] *= 2;
                            scoreElement.innerText = parseInt(scoreElement.innerText) + board[row * 4 + col];
                            board[row * 4 + col + 1] = 0;
                            for (let shiftCol = col + 1; shiftCol < 3; shiftCol++) {
                                board[row * 4 + shiftCol] = board[row * 4 + shiftCol + 1];
                            }
                            board[row * 4 + 3] = 0;
                            moved = true;
                        }
                    }
                }
                return moved;
            }

            function shiftRight() {
                let moved = false;
                for (let row = 0; row < 4; row++) {
                    let rowData = [];
                    for (let col = 0; col < 4; col++) {
                        if (board[row * 4 + col] !== 0) {
                            rowData.push(board[row * 4 + col]);
                        }
                    }
                    for (let col = 3; col >= 0; col--) {
                        if (rowData.length) {
                            board[row * 4 + col] = rowData.pop();
                            if (board[row * 4 + col] !== rowData[rowData.length-1]) moved = true;
                        } else {
                            board[row * 4 + col] = 0;
                        }
                    }

                    for (let col = 3; col > 0; col--) {
                        if (board[row * 4 + col] === board[row * 4 + col - 1]) {
                            board[row * 4 + col] *= 2;
                            scoreElement.innerText = parseInt(scoreElement.innerText) + board[row * 4 + col];
                            board[row * 4 + col - 1] = 0;
                            for (let shiftCol = col - 1; shiftCol > 0; shiftCol--) {
                                board[row * 4 + shiftCol] = board[row * 4 + shiftCol - 1];
                            }
                            board[row * 4] = 0;
                            moved = true;
                        }
                    }
                }
                return moved;
            }

            function shiftUp() {
                let moved = false;
                for (let col = 0; col < 4; col++) {
                    let rowData = [];
                    for (let row = 0; row < 4; row++) {
                        if (board[row * 4 + col] !== 0) {
                            rowData.push(board[row * 4 + col]);
                        }
                    }
                    for (let row = 0; row < 4; row++) {
                        if (row < rowData.length) {
                            board[row * 4 + col] = rowData[row];
                            if (board[row * 4 + col] !== rowData[row]) moved = true;
                        } else {
                            board[row * 4 + col] = 0;
                        }
                    }

                    for (let row = 0; row < 3; row++) {
                        if (board[row * 4 + col] === board[(row + 1) * 4 + col]) {
                            board[row * 4 + col] *= 2;
                            scoreElement.innerText = parseInt(scoreElement.innerText) + board[row * 4 + col];
                            board[(row + 1) * 4 + col] = 0;
                            for (let shiftRow = row + 1; shiftRow < 3; shiftRow++) {
                                board[shiftRow * 4 + col] = board[(shiftRow + 1) * 4 + col];
                            }
                            board[12 + col] = 0;
                            moved = true;
                        }
                    }
                }
                return moved;
            }

            function shiftDown() {
                let moved = false;
                for (let col = 0; col < 4; col++) {
                    let rowData = [];
                    for (let row = 0; row < 4; row++) {
                        if (board[row * 4 + col] !== 0) {
                            rowData.push(board[row * 4 + col]);
                        }
                    }
                    for (let row = 3; row >= 0; row--) {
                        if (rowData.length) {
                            board[row * 4 + col] = rowData.pop();
                            if (board[row * 4 + col] !== rowData[rowData.length-1]) moved = true;
                        } else {
                            board[row * 4 + col] = 0;
                        }
                    }

                    for (let row = 3; row > 0; row--) {
                        if (board[row * 4 + col] === board[(row - 1) * 4 + col]) {
                            board[row * 4 + col] *= 2;
                            scoreElement.innerText = parseInt(scoreElement.innerText) + board[row * 4 + col];
                            board[(row - 1) * 4 + col] = 0;
                            for (let shiftRow = row - 1; shiftRow > 0; shiftRow--) {
                                board[shiftRow * 4 + col] = board[(shiftRow - 1) * 4 + col];
                            }
                            board[col] = 0;
                            moved = true;
                        }
                    }
                }
                return moved;
            }
        });
    </script>
</body>
</html>